<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
?>
<script>
//init
$(window).load(function(){
	$('.bwWrapper').BlackAndWhite({
		hoverEffect : true, // default true
		// set the path to BnWWorker.js for a superfast implementation
		webworkerPath : false,
		// for the images with a fluid width and height 
		responsive:true,
		speed: { //this property could also be just speed: value for both fadeIn and fadeOut
	        fadeIn: 200, // 200ms for fadeIn animations
	        fadeOut: 800 // 800ms for fadeOut animations
	    }
	});
});
$(document).ready(function () {
	
});
$(function(){
	$('img.captify').captify({
		// all of these options are... optional
		// ---
		// speed of the mouseover effect
		speedOver: 'slow',
		// speed of the mouseout effect
		speedOut: 'normal',
		// how long to delay the hiding of the caption after mouseout (ms)
		hideDelay: 600,	
		// 'fade', 'slide', 'always-on'
		animation: 'slide',		
		// text/html to be placed at the beginning of every caption
		prefix: '',		
		// opacity of the caption on mouse over
		opacity: '0.5',					
		// the name of the CSS class to apply to the caption box
		className: 'caption-bottom',	
		// position of the caption (top or bottom)
		position: 'bottom',
		// caption span % of the image
		spanWidth: '90%'
	});
});
</script>
<style>	
#h-menu-g {
    position: relative;
    top: 0;
}

body.horizontal #header {
    height: 260px !important;
}

#h-menu-g2 {
    position: relative;
    top: 20px;
}

.wrapper {
	list-style:none;
	margin:0 auto;
}
.wrapper li{
	float: left;
	width:150px;
    border-left: 1px solid;
    border-top: 1px solid;
}
.wrapper li.last{
	border-right: 1px solid;
}
.wrapper a[href^="http:"]{
	padding:0;
}

.bwWrapper {
	position:relative;
	display:block;
}
.sel{display:block; position: relative;height:300px;}
#wrapper{
	clear: both;
    font-size: 14px;
    margin: 0 auto;
    padding: 10px 10px;
    width: 940px;
	border:1px solid;
}
#content{margin:2px auto;}
body.horizontal #header {
    height: 92px !important;
}
</style>
<?php 
$n = count($this->_items);
$n_itm = $n;
if($n_itm > 9) $n_itm = 9;
?>
<div style="margin: 0px auto; width: 960px; height: 300px;">
<ul class="wrapper" style="width:<?php echo (160*$n_itm);?>px;" >
<?php 
$description = "";
foreach($this->_items as $k=> $item){
	$classli="";
	$classa="bwWrapper ";
	$active = 0;
	$image = json_decode($item->params);
	// die;
	if(empty($this->subID)){
		$classa .="sel"; //first item selected
		// $this->subID = $item->id;
		// $description = $item->description;
		$description = "";
		$this->subID = 0;
		//$this->document->setTitle($this->title . ' - '.$item->title.' - '. $this->sitename);
	}else
	{
		if($this->subID == $item->id) {
			$description = $item->description;
			$classa ="sel";
			$active = 1;
			$this->document->setTitle($this->title . ' - '.$item->title.' - '. $this->sitename);
		}
	}
	if($k+1==$n) $classli .=" last";
	$style_title = "";
	if(!$active)
		$captify = 'class="captify" rel="caption'.$k.'"';
	else{
		$captify="";
		$style_title="class='caption-bottom' style='margin: -58px 0px 0px; padding-top: 5px; position: relative; z-index: 2; background: none repeat scroll 0% 0% transparent; border: 0px none; opacity: 1; width: 90%; text-shadow: 1px 1px 0px rgb(32, 32, 32);'";
	}
?>
	<li class='<?php echo $classli;?> '><a class='<?php echo $classa;?>' href="<?php echo JURI::base();?>index.php?option=<?php echo $this->option;?>&Itemid=<?php echo $this->itemID;?>&Subid=<?php echo $item->id;?>" tppabs="<?php echo JURI::base();?>index.php?option=<?php echo $this->option;?>&Itemid=<?php echo $this->itemID;?>&Subid=<?php echo $this->subID;?>#content2"><img <?php echo $captify;?>  src="<?php echo $image->image;?>" width="150" height="300" />
	<?php if($style_title){?>
	<div class="caption-bottom" style="margin: -38px 0 0; z-index: 1; position: relative; opacity: 0.5; width: 121px; height: 39.6px;"></div>
	<?php } ?>
	<div <?php echo $style_title;?> id="caption<?php echo $k; ?>"><?php echo $item->title;?></div>
	</a></li>
<?php }?>

</ul><!-- #h-menu-g -->
</div>
<div id="wrapper">
		<div id="content2" style="position:relative;min-height:500px;clear:both;">
			
		<?php 
		if(!empty($description))
			echo $description;
		else{
		?>
		<!-- them text trong dây -->
		<center>Giới thiệu công ty Việt Architect</center>
		<?php
		}
		?>	

			<div class="clear"></div>
		</div><!-- end #content -->
	</div><!-- end #wrapper -->
	<div class="clear"></div>